<template>
  <div class="anime-axios-loading">
    <div class="loading">
      <div :class="'circle'+v" class="circle" v-for="v in list"></div>
    </div>
    <span>Now Loading...</span>
  </div>
</template>
<script>
import $ from "jquery";
import anime from "animejs/lib/anime.es.js";
export default {
  name: "AniLoading",
  data() {
    return {
      list: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]
    };
  },
  mounted() {
    //循环动画
    anime
      .timeline({
        targets: ".circle",
        loop: true,
        easing: "easeInOutExpo"
        // direction: 'alternate',
      })
      .add({
        delay: anime.stagger(50),
        opacity: 1
      })
      .add({
        delay: anime.stagger(50),
        opacity: 0.2
      });
  },
  methods: {}
};
</script>
<style lang="scss" scoped>
.anime-axios-loading {
  display: flex;
  width: 100%;
  height: 100%;
  min-height: 10px;
  justify-content: center;
  align-items: center;
  background-color: white;
  .loading {
    position: relative;
    width: 20px;
    height: 20px;
    @for $i from 1 through 12 {
      .circle#{$i} {
        position: absolute;
        top: 0;
        left: 11px;
        width: 2px;
        opacity: 0.2;
        height: 20px;
        background-color: black;
        clip-path: polygon(0px 0px, 100% 0px, 100% 20%, 0% 20%);
        transform: rotateZ((30deg * ($i)-30deg));
      }
    }
  }
  span{
    font-size: 16px;
    font-weight: 500;
    margin-left: 10px;
    letter-spacing: 2px;
  }
}
</style>